<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Check-In/Out</title>
    <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
    <style type="text/css">
    body {
    	font-family: Calibri;
    	font-size: 16px;
    }
    select {
    	width: 80px;
    	border:1px solid #CCCCCC;
    }
    input {
    	width:80px;
    	border:1px solid #CCCCCC;
    }
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	 // $('table > tbody > tr:first > td:last').text($.datepicker.formatDate('yy-mm-dd', new Date()));
    	 $('#date').datepicker();
    	 $('#time').timepicker();
    	 $('#date').val($.datepicker.formatDate('mm/dd/yy', new Date()));
    	 var nameList = ["Duke","David"];
    	 $.each(nameList, function(){
    		 $('<option value="' + this + '">' + this + '</option>').appendTo('#name');
    	 });
    	 $('#submit').click(function(){
    		 // alert('ok');
    		 if($('#time').val() == '') {
    		 	alert('Time can not be empty!');
    			$('#time').focus();
    			return;
    	     }
    		 
    		 var checkin = {date:"",name:"",type:"",time:""};
    		 checkin.date = $('#date').val();
    		 checkin.name = $('#name').val();
    		 checkin.type = $('#type').val();
    		 checkin.time = $('#time').val();

        	 $.ajax({
        		url:"widget/checkitout",
        	 	type:"POST",
        	 	data:checkin,
        	 	error:function(jqXHR, textStatus, errorThrow){
        	 		alert('Error: ' + errorThrow);
        	 	},
        	 	success: function(data){
        	 		alert(data);
        	 	}
        	 });
    	 });
    });
    </script>
  </head>
  <body>
    <h1>Check-in/out</h1>
    <table>
      <tbody>
	      <tr>
	        <td>Date:</td>
	        <td><input type="text" id="date" name="date" /></td>   
	      </tr>
      	  <tr>
      	  	<td>Name:</td>
      	  	<td><select id="name" name="name"></select></td>
      	  </tr>
	      <tr>
	      	<td>Type:</td>
	      	<td><select id="type" name="type">
		      		<option value="0">Check-in</option>
		      		<option value="1">Check-out</option>
		      		<option value="2">Lunch-out</option>
		      		<option value="3">Lunch-in</option>
	      		</select>
	      	</td>
	      </tr>
	      <tr>
	      	<td>
	      		Time:
	      	</td>
	      	<td>
	      		<input type="text" id="time" name="time" />
	      	</td>
	      </tr>
	      <tr>
	      	<td colspan="2">
	      		<input type="button" id="submit" name="submit" value="Submit" />
	      	</td>
	      </tr>
      </tbody>
    </table>
  </body>
</html>
